<template>
  <div class="content">
    <el-card shadow="never">
      <div class="menu-header">
        <el-form :inline="true" :model="queryParams">
          <el-form-item>
            <span class="title-label">用户昵称 </span>
            <el-input
                v-model="queryParams.nickName"
                placeholder="请输入用户昵称"
                style="width: 220px"
                clearable
            ></el-input>
          </el-form-item>

          <el-form-item>
            <span class="title-label">用户编号 </span>
            <el-input
                v-model="queryParams.id"
                placeholder="请输入用户编号"
                style="width: 220px"
                clearable
            ></el-input>
          </el-form-item>

          <el-form-item style="margin-left: 25px">
            <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
            >搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
              重置
            </el-button>
          </el-form-item>
        </el-form>

        <div class="button-container">
          <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
          >
            新增
          </el-button>
          <el-button
              type="info"
              plain
              icon="el-icon-sort"
              size="mini"
              @click="toggleExpandAll"
          >
            展开/折叠
          </el-button>
        </div>
      </div>

      <div class="menu-body">
        <el-table
            v-if="refreshTable"
            :data="userList"
            :header-cell-style="{ background: '#f8f8f9', color: '#606266' }"
            ref="table"
            row-key="id"
            style="width: 100%"
            size="medium"
            :default-expand-all="isExpandAll"
        >
          <el-table-column prop="id" label="用户编号" align="center">
          </el-table-column>
          <el-table-column prop="username" label="用户账号" align="center">
          </el-table-column>
          <el-table-column prop="nickName" label="用户昵称" align="center">
          </el-table-column>
          <el-table-column prop="userInfo.phone" label="手机号码" align="center">
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" align="center">
            <template #default="scope">
              {{formatDate(scope.row.updateTime)}}
            </template>
          </el-table-column>
          <el-table-column prop="ipSource" label="IP属地" align="center">
          </el-table-column>
          <el-table-column  label="操作" align="center">
            <el-button
                class="reset-margin"
                link
                type="primary"
                icon="el-icon-delete"
                size="mini"
            >
              删除
            </el-button>
            <el-dropdown>
              <el-button
                  class="ml-3 mt-[2px]"
                  link
                  type="primary"
                  size="mini"
                  icon="el-icon-more-outline"
              >
                更多
              </el-button>
            </el-dropdown>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-button
                      link
                      type="primary"
                  >
                    重置密码
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                      link
                      type="primary"
                  >
                    分配角色
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getAllUser } from "@/api/user";
import dayjs from 'dayjs'

export default {
  name: "Menus",

  data() {
    return {
      // 查询参数
      queryParams: {
        // 用户昵称
        nickName: "",
        // 用户编号
        id: "",
      },
      // 菜单表格数据
      userList: [],
      // 是否展开全部菜单
      isExpandAll: false,
      // 是否重新渲染表格状态
      refreshTable: true,
    };
  },

  mounted() {
    this.getTableData();
  },

  methods: {
    formatDate(time) {
      return dayjs(time).format('YYYY-MM-DD HH:MM')
    },
    // 获取表格数据
    getTableData() {
      getAllUser(this.queryParams).then((result) => {
        this.userList = result;
      });
    },
    handleAdd() {
      this.$message.warning("当前功能正在开发中");
    },
    handleQuery() {
      this.getTableData();
    },
    // 点击了重置按钮
    resetQuery() {
      // 重新设置查询参数
      this.queryParams.nickName = "";
      this.queryParams.id = "";
    },

    // 展开/折叠操作
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    }

  },
};
</script>

<style lang="scss">
.menu-container {
  margin-top: 10px;

  .menu-header {
    margin-top: 10px;
    padding-left: 15px;

    .title-label {
      font-size: 14px;
      font-weight: 700;
      color: #606266;
      margin-right: 12px;
    }
  }

  .menu-body {
    margin: 20px 15px 30px 15px;
  }
}
</style>
<style>
.el-button--primary.is-plain {
  color: #38d39f;
  background: #f0fff0;
  border-color: #98fb98;
}

.el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner {
  border-color: #38d39f;
}

.el-select .el-input__inner:focus {
  border-color: #38d39f;
}

input.is-focus .el-input__inner {
  border-color: #38d39f;
}
.el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner {
  border-top-color: #38d39f;
  border-right-color: #38d39f;
  border-bottom-color: #38d39f;
  border-left-color: #38d39f;
}

.el-select-dropdown__item.selected {
  color: #38d39f;
  font-weight: 700;
}

.el-button--primary:focus, .el-button--primary:hover {
  background: #98fb98;
  border-color: #98fb98;
  color: #FFF;
}

.el-button--primary:focus, .el-button--primary:hover {
  background: #98fb98;
  border-color: #98fb98;
  color: #98fb98;
}

.el-button--primary {
  color: #FFF;
  background-color: #38d39f;
  border-color: #38d39f;
}

.el-button:focus, .el-button:hover {
  color: #38d39f;
  border-color: #f0fff0;
  background-color: #f0fff0;
}
</style>
